window.onload=function(){
    var container=document.getElementById("container");
    var small_pic=document.getElementById("small-pic");
    var big_pic=document.getElementById("big-pic");
    var lis=document.getElementsByTagName("li");
    var span=document.getElementById("span");
    var small_img=small_pic.getElementsByTagName("img")[0];
    var big_img=big_pic.getElementsByTagName("img")[0]

    small_pic.onmouseover=function(){
         big_pic.style.display="block";
         span.style.display="block";
         this.onmousemove=function(event){
                event=event||window.event;
                var left=event.clientX-container.offsetLeft-span.clientWidth/2;
                var top=event.clientY-container.offsetTop-span.clientHeight/2;
                if(left<0){
                    left=0;
                }else if(left>small_pic.clientWidth-span.clientWidth){
                    left=small_pic.clientWidth-span.clientWidth;
                }
                if(top<0){
                    top=0;
                }else if(top>small_pic.clientHeight-span.clientHeight){
                    top=small_pic.clientHeight-span.clientHeight;
                }
                span.style.left=left+'px';
                span.style.top=top+'px';
                big_img.style.left=-small_pic.clientWidth/span.clientWidth*left+'px';
                big_img.style.top=-small_pic.clientHeight/span.clientHeight*top+'px';
               
         }
    }
    small_pic.onmouseout=function(){
    	big_pic.style.display="none";
        span.style.display="none";
    }
    for(var i=0;i<lis.length;i++){
    	 lis[i].onmouseover=function(){
    	     for(var j=0;j<lis.length;j++){
    	     	   if(lis[j].className=="choosed"){
    	     	   	   lis[j].className="";
    	     	   }
    	     }
    	     this.className="choosed";
             var small_src=this.getElementsByTagName("a")[0].getAttribute("smallPic");
             var big_src=this.getElementsByTagName("a")[0].getAttribute("bigPic");
             small_img.setAttribute("src",small_src);
             big_img.setAttribute("src",big_src);
         }
    }

}